<template>
	<view class="box screen-all flex overflow-hidden">
		<head-navigation></head-navigation>
		<!-- achievement -->
		<!-- 顶部 日历 -->
		<scroll-view class="scroll-top-view flex row aCenter" enable-flex="true" scroll-x="true">
			<view 
				v-for="(item,index) in timeList" :key="index"
				:class="[item.active ? 'top-time-view-active' : 'top-time-view', '']" @click="xuanze(item)">
				<view class="screen-all flex center">
					<text class="top-item-title">{{item.m}}月</text>
					<view class="top-item-line"></view>
					<text class="top-item-hint">{{item.y}}年</text>
				</view>
			</view>
		</scroll-view>
		<!-- 数据统计 -->
		<view class="tongji-view flex center">
			<text>当月总业绩: {{month_price}}</text>
		</view>
		<!-- list -->
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" top="360rpx">
			<view class="item-view flex" v-for="(item,index) in dataList" :key="index">
				
				<view v-if="item.display == 1" class="flex">
					<view class="item-title-view flex row aCenter">
						<text class="item-order-no">订单号：{{item.order_sn}}</text>
						<text class="status-text">{{'扫码点单'}}</text>
					</view>
					<view class="content-view flex row aCenter">
						<image class="goods-icon" :src="item.goods_image"></image>
						<view class="flex-1 content-right flex">
							<view class="flex row aCenter">
								<text class="flex-1 goods-title">P.T.2黄河路店</text>
								<text class="goods-title">桌位：{{item.table_num}}</text>
							</view>
							<text class="goods-price">订单总价:￥{{item.shop_price}}</text>
							<text class="goods-hint">{{item.createtime}}</text>
						</view>
					</view>
					<view class="bottom-view flex row aCenter">
						<text v-if="item.is_status == 1" style="font-size: 28rpx;color: #18B566;">已返利</text>
						<text v-if="item.is_status == 0" style="font-size: 28rpx;color: #E04B28;">未返利</text>
						
						<view class="bom-btn flex center" @click.stop="goDetail(item)">
							查看详情
						</view>
					</view>
				</view>
				
				<view v-if="item.display == 2" class="flex">
					<view class="item-title-view flex row aCenter">
						<text class="item-order-no">流水号：{{item.order_sn}}</text>
						<text class="status-text">{{'余额充值'}}</text>
					</view>
					<view class="content-view flex row aCenter">
						<image class="goods-icon" :src="item.goods_image"></image>
						<view class="flex-1 content-right flex">
							<view class="flex row aCenter">
								<text class="flex-1 goods-title">{{item.nickname}}</text>
								<text class="goods-title">桌位：{{item.table_num}}</text>
							</view>
							<text class="goods-price">￥{{item.shop_price}}</text>
							<text class="goods-hint">{{item.createtime}}</text>
						</view>
					</view>
					<view class="bottom-view flex row aCenter">
						<text v-if="item.is_status == 1" style="font-size: 28rpx;color: #18B566;">已返利</text>
						<text v-if="item.is_status == 0" style="font-size: 28rpx;color: #E04B28;">未返利</text>
						
						<!-- <view class="bom-btn flex center" @click.stop="goDetail(item)">
							查看详情
						</view> -->
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import moment from 'moment';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {},// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},// 上拉加载的配置(可选, 绝大部分情况无需配置)
				// 列表数据
				dataList: [1,2,3,4,5,6],
				
				timeList: [],
				month_id: 0,
				month_price: 0,
			}
		},
		onLoad() {
			this.initDataInfo();
			
			// let time = '202110';
			// if(time.length >= 6){
			// 	console.log(time.substring(0,4));
			// 	console.log(time.substring(4,time.length));
			// }
		},
		methods: {
			initDataInfo () {
				//api/user/user_achievement_month_list
				let params = {
					token: uni.getStorageSync("token"),
				}
				console.log(params);
				this.$request("api/user/user_achievement_month_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							
							let _list = [];
							data.map((item, index)=>{
								let params = {
									id: item.id,
									money: item.money,
									time: item.time,
									y: item.time.substring(0, 4),
									m: item.time.substring(4, item.time.length),
									active: index == 0 ? true : false,
								}
								
								if(index == 0){
									this.month_id = item.id;
									this.month_price = item.money;
								}
								
								_list.push(params);
							});
							
							this.timeList = _list;
							
							//初始化的时候，赋值
							this.mescroll.resetUpScroll();
						}else{
							
						}
					}).catch((e) => {
						console.log(e);
					});
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(){
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			upCallback(page) {
				let params = {
					token: uni.getStorageSync("token"),
					p: page.num,
					month_id: this.month_id,
				}
				console.log(params);
				this.$request("api/user/user_achievement_list", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							if(page.num == 1){
								this.dataList = data.order;
							}else{
								this.dataList = this.dataList.concat(data.order);
							}
							this.mescroll.endSuccess(data.order.length);
						}else{
							this.mescroll.endErr()
						}
					}).catch((e) => {
						this.dataList = [];
						this.mescroll.endErr()
						console.log(e);
					});
			},
			
			xuanze (obj) {
				console.log(obj);
				let _list = [...this.timeList];
				_list.map((item, index)=>{
					if(obj.id == item.id){
						item.active = true;
						this.month_id = item.id;
						this.month_price = item.money;
					}else{
						item.active = false;
					}
				});
				this.timeList = _list;
				
				this.mescroll.resetUpScroll();
			},
			goDetail (item) {
				uni.navigateTo({
					url: '/pages/role-user/details?id='+item.id,
				})
			},
		}
	}
</script>

<style scoped>
	.box {
		background-color: #010B24;
	}
	.scroll-top-view {
		width: 100%;
		height: 170rpx;
		white-space: nowrap;
		padding: 20rpx 0;
	}
	.top-time-view {
		display: inline-block;
		width: 105rpx;
		height: 130rpx;
		background-color: #1D263C;
		border-radius: 12rpx;
		padding: 12rpx 22rpx;
		margin: 0 12rpx;
	}
	.top-time-view-active {
		display: inline-block;
		width: 105rpx;
		height: 130rpx;
		background-color: #B053FF;
		border-radius: 12rpx;
		padding: 12rpx 22rpx;
		margin: 0 12rpx;
	}
	.top-item-title {
		font-size: 28rpx;
		color: #FFFFFFCC;
	}
	.top-item-hint {
		font-size: 24rpx;
		color: #FFFFFFAA;
	}
	.top-item-line {
		width: 70rpx;
		height: 1rpx;
		background-color: #FFFFFF66;
		margin: 10rpx 0;
	}
	
	.item-view {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 12rpx;
		margin-bottom: 7rpx;
		background-color: #FFF;
		border-radius: 18rpx;
		padding: 0 26rpx;
	}
	.item-title-view {
		padding: 18rpx 0;
		border-bottom: 1rpx solid #F2F2F2;
	}
	.item-order-no {
		font-size: 28rpx;
		color: #222222;
		flex: 1;
	}
	.status-text {
		font-size: 26rpx;
		color: #6B6B6B;
	}
	.status-pay {
		font-size: 26rpx;
		color: #8C48E9;
	}
	.content-view {
		padding: 16rpx 0;
	}
	.goods-icon {
		width: 134rpx;
		height: 134rpx;
		background-color: #F2F2F2;
	}
	.goods-title {
		font-size: 28rpx;
		color: #222222;
	}
	.goods-price {
		font-size: 28rpx;
		color: #222222;
		font-weight: bold;
		margin: 6rpx 0;
	}
	.goods-hint {
		font-size: 26rpx;
		color: #8D8D8D;
	}
	.content-right {
		padding-left: 15rpx;
	}
	
	.bottom-view {
		border-top: 1rpx solid #F2F2F2;
		padding: 18rpx 0;
		justify-content: space-between;
	}
	.bom-btn {
		padding: 8rpx 30rpx;
		border: 1rpx solid #B6B6B6;
		background-color: #FFF;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #222222;
		margin-left: 23rpx;
	}
	.bom-btn:active {
		background-color: #F0F0F0;
	}
	
	.tongji-view {
		width: 100%;
		font-size: 28rpx;
		color: #FFF;
	}
</style>
